<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。</title>
<style type="text/css">  
	html,
	body { height: 100%; padding: 0; margin: 0; }

	/*方案一*/
	/*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
	.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
	.B { height: 100%; background: #D9C666; }*/

	/*方案二*/
	/*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
	.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
	.B { height: 100%; background: #D9C666; }*/

	/*方案三*/
/* 	.outer { height: 100%; position: relative; }
	.A { height: 100px; background: #BBE8F2; }
	.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; } */
</style>
</head>
<body>
<pre>
（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;

（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。
详细资料可以参考： <a href="https://blog.csdn.net/xutongbao/article/details/79408522" rel="nofollow">《有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度(三种方案)》</a>
</pre>

<!-- <div class="outer">
	<div class="A"></div>
	<div class="B"></div>
</div> -->
<script type="text/javascript">
</script>
</body>
</html>